<script setup lang="ts">
import CrudPage from "@/components/CrudPage/index.vue";
import {
  createSysApi,
  getSysApiList,
  updateSysApi,
  SysApi
} from "@/views/domain/admin/api/sysApi";

import { ref } from "vue";
import { useSysApiProvider } from "./provider";

const query = ref<Record<string, any>>({});
const { columns } = useSysApiProvider();

const onShouldLoadData = async (
  pgs: any
): Promise<{ list: SysApi[]; total?: number }> => {
  const { data } = await getSysApiList(pgs);
  return data;
};
</script>

<template>
  <div>
    <CrudPage
      title=""
      row-key="id"
      :create="{
        viewType: 'drawer',
        labelPosition: 'top',
        rowProps: { gutter: 20 },
        colProps: { span: 12 }
      }"
      :columns="columns"
      child-field="children"
      :get-data-list="onShouldLoadData"
      @edit-confirm="updateSysApi"
      @create-confirm="createSysApi"
    >
      <template #operation="{ row, edit }">
        <el-button type="text" @click="edit(row)">编辑</el-button>
        <el-button type="text">删除</el-button>
      </template>
    </CrudPage>
  </div>
</template>
<style lang="scss" scoped></style>
